<template>
  <div class="record-box" v-if="showRecord">
    <div class="head row-space-around">
      <div class="title all-center" :key="index" v-for="(item, index) in headTile">
        {{ item.text }}
      </div>
    </div>
    <div class="record-box-tbody">
      <PullRefresh v-model="listPayload.isRefresh" class="fresh-box" @refresh="freshHistory">
        <List
          v-model="listPayload.isLoading"
          :finished="listPayload.isFinished"
          finished-text="没有更多了～"
          @load="getMoreHistory"
          :immediate-check="false"
          :offset="100"
        >
          <ul class="content" v-for="(item, index) in handleRecordList" :key="index">
            <div class="cell-box all-center row-space-around">
              <div class="all-center item-box" v-for="(numItem, numIndex) in item" :key="numIndex">
                <div class="number-box column-center">
                  <div class="all-center number" :class="[numItem.className, numItem.lastNumclassName]">
                    {{ numItem.text }}
                  </div>
                  <div class="all-center animal" v-if="numIndex !== 0">{{ numItem.animal }}</div>
                </div>
              </div>
            </div>
          </ul>
        </List>
      </PullRefresh>
    </div>
  </div>
</template>

<script>
import { numberMap } from '@config/markSixConfig.js'
import { $utils } from '@utils'
import { findHistoryPage } from '@/api'
import { useGameStore } from '@/stores/game'
import { List, PullRefresh } from 'vant'

export default {
  components: {
    List,
    PullRefresh,
  },
  data() {
    return {
      listPayload: {
        isLoading: false,
        isFinished: true,
        isRefresh: false,
        hasNextPage: false,
        totalPages: 1,
        fresh: true, // 刷新标记和请求接口标记
      },
      showRecord: false,
      headTile: [
        { text: '期号' },
        { text: '正1' },
        { text: '正2' },
        { text: '正3' },
        { text: '正4' },
        { text: '正5' },
        { text: '正6' },
        { text: '特码' },
      ],
      recordsList: [],
      gameStore: useGameStore(),
    }
  },
  computed: {
    // 处理适合渲染的数据
    handleRecordList() {
      if ($utils.isEmpty(this.recordsList)) return []
      let list = []

      this.recordsList.forEach((item) => {
        const arr = []
        let numList = item.drawingResult.split(',')
        numList = numList.map((numberItem, numIndex) => {
          let className = ''
          let lastNumclassName = ''
          let animal = numberMap[numberItem].animal
          // 处理动物
          className = numberMap[numberItem].color
          if (numIndex === numList.length - 1) lastNumclassName = className + '-bg'

          return { text: numberItem, tag: 'num', className, lastNumclassName, animal }
        })
        arr.push(
          {
            text: `${item.periodsNumber}期`,
            tag: 'date',
            className: '',
            lastNumclassName: '',
            animal: '',
          },
          ...numList,
        )
        list.push(arr)
      })

      return list
    },
  },
  methods: {
    getContainer() {
      return document.querySelector('.game-content')
    },
    open() {
      this.showRecord = true
    },
    // 显示或隐藏
    showOrHide() {
      const gameType = this.gameStore.currentGame
      this.showRecord = !this.showRecord
      if (this.showRecord) {
        this.query = {
          current: 1,
          size: 50,
          lotteryCode: gameType,
        }
        this.recordsList = []
        this.fetchHistory()
      }
    },

    close() {
      this.showRecord = false
    },
    // 刷新数据
    freshHistory() {
      this.listPayload.fresh = true
      this.listPayload.isFinished = false
      this.query.current = 1
      setTimeout(() => {
        this.listPayload.isRefresh = true
        this.fetchHistory(() => {
          this.listPayload.isRefresh = false
          this.listPayload.isFinished = false
        })
      }, 1000)
    },

    // 加载更多
    getMoreHistory() {
      if (this.query.current > this.listPayload.totalPages) {
        this.listPayload.isLoading = false
        this.listPayload.isFinished = true
        return
      }
      this.listPayload.isLoading = true
      this.listPayload.isFinished = false
      setTimeout(() => {
        this.query.current++
        this.fetchHistory(() => {
          this.listPayload.isLoading = false
          this.listPayload.isFinished = false
        })
      }, 500)
    },

    // 获取历史数据
    async fetchHistory(cb = () => {}) {
      this.query.lotteryCode = this.gameStore.currentGame
      const {
        data: { records, pages },
      } = await findHistoryPage(this.query)
      this.listPayload.totalPages = pages
      if (cb) cb()
      // if (!records[0].drawingResult) records.shift() //有可能存在最新一期还未开奖的情况，若最新一期还没开奖就将这一期剔除
      if (this.listPayload.fresh) {
        // 刷新数据
        this.listPayload.fresh = false
        this.recordsList = records
      } else {
        // 加载更多
        this.recordsList = this.recordsList.concat(records)
      }
    },
  },
}
</script>

<style scoped lang="less">
.record-box {
  box-sizing: border-box;
  width: 100%;
  background: #171a26;
  position: absolute;
  top: -0;
  z-index: 99;
  max-height: 392px;
  min-height: 200px;
  left: 0;
  overflow: hidden;

  .record-box-tbody {
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    color: #6a6a6a;
    overflow-y: scroll;
    height: 340px;
    .content {
      width: 100%;
      border-bottom: 1px solid #363d57;
      box-sizing: border-box;
      height: 392px;
      overflow-y: scroll;
      height: 100%;
      li {
        color: black;
      }

      .van-cell {
        padding: 0;
        line-height: initial;
      }

      .cell-box {
        font-size: 12px;
        padding: 0 25px 0 14px;
        color: #bdc4ff;
        height: 42px;

        &:nth-child(even) {
          background: #ecedf4;
        }

        &:nth-child(1) {
          font-size: 12px;
          border: none;
        }

        .red {
          color: #ff3e3e;
          border: 1px solid #ff3e3e;
          border-radius: 50%;
        }
        .red-bg {
          background: #ff3e3e;
          color: white;
        }

        .blue {
          color: #4d3eff;
          border: 1px solid #4d3eff;
          border-radius: 50%;
        }
        .blue-bg {
          background: #4d3eff;
          color: white;
        }

        .green {
          color: #11b548;
          border: 1px solid #11b548;
          border-radius: 50%;
        }
        .green-bg {
          background: #11b548;
          color: white;
        }

        .item-box {
          &:nth-child(1) {
            width: 70px;
          }
          width: 18px;

          .number-box {
            font-size: 11px;
            width: 100%;

            .number {
              width: 100%;
              height: 18px;
              margin-top: 2px;
            }

            .animal {
              font-size: 10px;
              scale: 0.9;
            }
          }
        }
      }
    }
  }

  .head {
    box-sizing: border-box;
    height: 33px;
    width: 100%;
    padding: 0 25px 0 14px;
    border-bottom: 1px solid #363d57;

    .title {
      font-size: 11px;
      color: #a2a9e6;

      &:nth-child(1) {
        width: 70px;
        font-size: 13px;
      }
    }
  }
}
</style>
